<template>
    <HeaderTitle title="请选择工作帐户"></HeaderTitle>
    <div id="chooseRolePage" class="roleBox">
        <!-- Domestic 4083 内销-->
        <div class=" row justify-center items-center roleBtns">
            <button v-for="(d) in userStore.domestic" :key="d.accID" class="btn-br10 color-lightbluegrey" @click="setRole(d.accID)">
                <span class="roleSpan f-bold"> 内销 - {{ d.deptName }} - {{ d.role_chinese_name }} </span> <br/>
                <span class="roleSpan"> {{ d.userCode }}</span>
            </button>
        </div>
        <!-- Export 1062 外销-->
        <div class=" row justify-center items-center roleBtns">
            <button v-for="(e) in userStore.export" :key="e.accID" class="btn-br10 color-bluegrey" @click="setRole(e.accID)">
                <span class="roleSpan f-bold"> 外销 - {{ e.deptName }} - {{ e.role_chinese_name }}</span> <br/>
                <span class="roleSpan"> {{ e.userCode }}</span>
            </button>
        </div>
        <!-- Others 其他-->
        <div class=" row justify-center items-center roleBtns">
            <button v-for="(o) in userStore.others" :key="o.accID" class="btn-br10 color-darkbluegrey" @click="setRole(o.accID)">
                <span class="roleSpan f-bold"> {{ o.deptName }} - {{ o.role_chinese_name }}</span> <br/>
                <span class="roleSpan"> {{ o.userCode }}</span>
            </button>
        </div>
    </div>
</template>

<script setup>
import HeaderTitle from '../components/HeaderTitle.vue'
import { useUserStore } from 'src/stores/modules/userStore'
import { useRouter } from 'vue-router'

const $router = useRouter()
const userStore = useUserStore()

const setRole = (accID) => {
  userStore.setCurrentDept(accID)
  $router.push('/mainMenu')
}

</script>

<style lang="scss">

.chooseRoleheader{
    color: white;
    margin-top: 15px;

}

.backImgCol{
    vertical-align: middle;
}

.crtitleCol{
    vertical-align: middle;
    padding-top: 0.3rem;
}

.crtitle{
    font-size: 1.5rem;
}

.backImg{
    height: 2.8rem;
    width: 3rem;
    float: left;
}

.roleBox{
    background-image: linear-gradient(#E0E0F6, #E4E5F8, #E9ECFA);
    width: 80%;
    margin-top: 20px;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.roleSpan{
    @media (max-width:480px){
        font-size: 1rem;
    }
    font-size: 1.2rem;
}

</style>
